<template>
  <div class="json-editor-demo">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>JSON编辑器</span>
            </div>
          </template>

          <JsonTreeEditor v-model="jsonData" :height="400" placeholder="请输入JSON内容..." @valid="handleValid"
            @change="handleChange" />

          <div class="editor-actions">
            <el-button type="primary" @click="getJson">获取JSON</el-button>
            <el-button @click="setSampleJson">设置示例JSON</el-button>
            <el-button @click="clearJson">清空JSON</el-button>
            <el-button @click="copyJson">复制JSON</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>JSON内容预览</span>
            </div>
          </template>

          <pre class="json-preview">{{ formattedJson }}</pre>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import JsonTreeEditor from '@/components/JsonTreeEditor.vue'

const jsonData = ref('')

// 计算属性：格式化JSON预览
const formattedJson = computed(() => {
  if (!jsonData.value) return '暂无数据'

  try {
    const parsed = JSON.parse(jsonData.value)
    return JSON.stringify(parsed, null, 2)
  } catch (error) {
    return '无效的JSON格式'
  }
})

// 处理JSON有效性变化
const handleValid = (isValid: boolean) => {
  console.log('JSON有效性:', isValid)
}

// 处理JSON内容变化
const handleChange = (value: string) => {
  console.log('JSON内容变化:', value)
}

// 获取JSON内容
const getJson = () => {
  if (!jsonData.value) {
    ElMessage.warning('JSON内容为空')
    return
  }

  try {
    const parsed = JSON.parse(jsonData.value)
    ElMessage.success('JSON内容获取成功')
    console.log('JSON内容:', parsed)
  } catch (error) {
    ElMessage.error('JSON格式错误')
  }
}

// 设置示例JSON
const setSampleJson = () => {
  const sample = {
    name: "Vue.js",
    version: "3.0",
    features: [
      "Composition API",
      "Teleport",
      "Suspense",
      "Multiple v-models",
      "Reactivity improvements"
    ],
    author: {
      name: "Evan You",
      company: "Vue.js Team"
    },
    releaseDate: "2020-09-18",
    isStable: true,
    license: "MIT"
  }

  jsonData.value = JSON.stringify(sample, null, 2)
  ElMessage.success('已设置示例JSON')
}

// 清空JSON
const clearJson = () => {
  jsonData.value = ''
  ElMessage.success('已清空JSON')
}

// 复制JSON到剪贴板
const copyJson = async () => {
  if (!jsonData.value) {
    ElMessage.warning('没有内容可复制')
    return
  }

  try {
    await navigator.clipboard.writeText(jsonData.value)
    ElMessage.success('JSON已复制到剪贴板')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}
</script>

<style scoped>
.json-editor-demo {
  padding: 0px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-actions {
  margin-top: 20px;
  text-align: center;
}

.json-preview {
  max-height: 300px;
  overflow-y: auto;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
}
</style>